<template>
  <div>
    <!-- 头部 -->
    <NavBar :title="'城市列表'"></NavBar>
    <!-- 内容 -->
    <van-index-bar :index-list="VIAindexs" :sticky-offset-top="46">
      <div
        v-for="(item, index) in VIAindexs"
        :key="index"
        :class="index === VIAindexs.length - 1 ? 'mainHeight' : ''"
      >
        <van-index-anchor
          :index="
            item === '#' || item === '热'
              ? item === '#'
                ? '当前城市'
                : '热门城市'
              : item
          "
        />
        <van-cell
          v-for="(itm, index) in sn[item]"
          :key="index"
          :title="itm.city"
          to="/"
          @click="$store.commit('toArticle', itm)"
        />
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'hk-city',
  mounted() {},
  async created() {
    const hotRes = await request({
      url: '/area/hot',
      method: 'get'
    })
    console.log(hotRes)
    this.hotList = hotRes.body
    const cityRes = await request({
      url: '/area/city?level=1',
      method: 'get'
    })
    console.log(cityRes)
    this.cityList = cityRes.body
  },
  data() {
    return {
      VIAindexs: [
        '#',
        '热',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      cityList: [],
      hotList: []
    }
  },

  methods: {},
  computed: {
    sn() {
      const city = {}
      if (city['#']) {
        city['#'].push(this.$store.state.mycity)
      } else {
        city['#'] = []
        city['#'].push(this.$store.state.mycity)
      }
      this.hotList.forEach((itm) => {
        if (city['热']) {
          city['热'].push({ city: itm.label, value: itm.value })
        } else {
          city['热'] = []
          city['热'].push({ city: itm.label, value: itm.value })
        }
      })
      this.VIAindexs.forEach((item) => {
        this.cityList.forEach((itm) => {
          if (itm.pinyin.split('')[0].toUpperCase() === item) {
            if (city[item]) {
              city[item].push({ city: itm.label, value: itm.value })
            } else {
              city[item] = []
              city[item].push({ city: itm.label, value: itm.value })
            }
          }
        })
      })

      return city
    }
  }
}
</script>

<style scoped lang="less">
.van-index-bar {
  position: absolute;
  top: 46px;
  left: 0;
  width: 100%;
}
/deep/.van-index-anchor {
  color: rgb(122, 122, 122);
  font-size: 12px;
}
/deep/.van-index-anchor--sticky {
  color: #21b97a;
  font-size: 16px;
}
/deep/.van-index-bar__index--active {
  color: #fff;
  background-color: #21b97a;
  border-radius: 50%;
}
/deep/.van-index-bar__index {
  padding: 2px;
  margin: 2px 4px 2px 0;
  width: 18px;
  height: 18px;
  font-size: 12px;
}
/deep/.van-index-bar__sidebar {
  top: 357px;
}
.mainHeight {
  min-height: 800px;
}
</style>
